<template>
<el-dialog
  :title="tableName"
  :visible.sync="visible"
  width="30%"
  center
  @close="close">
    <el-form :model="formData" :rules="rules" ref="ruleForm" :label-width="formLabelWidth">
        <el-form-item label="字段：" prop="field">
            <el-select v-model="formData.field" placeholder="请选择字段">
                <el-option v-for="field in fields" :key="field.name" :label="field.alia" :value="field.name"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="修改为：">
            <el-input v-model="formData.batchValue" placeholder="请填写修改数据" autocomplete="off"></el-input>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="ok">确定</el-button>
    </span>
</el-dialog>
</template>

<script>
export default {
    props: {
        visible: Boolean,
        fields: Array,
    },
    data(){
        return {
            tableName: '批量编辑',
            formLabelWidth: '100px',
            formData: {
                field: '',
                batchValue: ''
            },
            rules: {
                field: [
                    { required: true, message: '请选择字段', trigger: 'change' }
                ]
            }
        }
    },
    methods:{
        close(){
            this.$emit('close')
        },
        ok(){
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    this.$emit('success', this.formData)
                } else {
                    return false;
                }
            });
        }
    }
}
</script>

<style>

</style>